<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script>
    var charts = echarts.init(document.getElementById('container'));
    var data1 = [
        { name: '北京', value: 2000 },
        { name: '上海', value: 1800 },
        { name: '广东', value: 2500 },
    ];

 var change = false;
    // Draw the map
    function drawMap(data) {
        // Initialize ECharts instance
        // charts?.dispose();
        // charts = echarts.init(document.getElementById('container'));

        let max = 0;
        data.forEach(item => {
          console.log(`item ${item.name} ${item.value}`);
            if (item.value > max) {
                max = item.value;
            }
        });
        console.log(`max ${max}`);
        // Set options for the chart
        charts.setOption({
            backgroundColor: "#FFFFFF",
            title: {
                text: "设备分布",
                subtext: "",
                left: 'left',
                padding: 20,
                textStyle: {
                    fontSize: 30
                }
            },
            tooltip: {
                trigger: "item"
            },
            // Left side small navigation
            visualMap: {
                min: 0,
                max: max,
                text: ["高", "低"],
                inRange: {
                    color: ["#FFFFFF", "#B80A09"] // Color transition range
                }
            },
            // Series configuration
            series: [
                {
                    name: "设备分布",
                    type: "map",
                    mapType: "china", // Use "china" as the map type
                    roam: true,
                    label: {
                        normal: {
                            show: true // Show province name
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: data 
                }
            ]
        });

    }


        // Listen to messages from Flutter (or other sources)
        window.addEventListener("message", function (event) {
            const { city, newText } = event.data;
    console.log(`addEventListener ${city} 的提示文本：${newText}`);
                    data1 = [
        { name: '北京', value: 1000 },
        { name: '上海', value: 800 },
        { name: '广东', value: 500 },
    ];
                    change = true;
                     drawMap(data1);
        });

        drawMap(data1);

</script>
</body>
</html>
